<template>
  <div id="TaxiZone">
    <div class="shpUp">
      <el-select v-model = "sysFileId" placeholder = "请选择Shp数据" @change = "selectFileName()" class = "selectShp">
        <el-option v-for = "item in this.fileNameList" :key = "item.id" :label = "item.name" :value = "item.id"></el-option>
      </el-select>
<!--      <lable class="input-file-button" for="uploadFileInput">请选择要上传的shp文件</lable>-->
<!--      <input class="uploadFileInput" type="file" id="uploadFileInput" name="zip" @change="selectShpFile()">-->
      <el-button class="clearButton" @click="clearMap">清除图层</el-button>
    </div>


    <div id="TaxiZone_MAP" class="container">
      <img id="tazone" src="../../assets/image/TaxiAnalysis/relitu.png" >
    </div>
    <legend class="Taxizone">2008年1月11日</legend>

  </div>
</template>
<script>

import shapefile from "shapefile";

let map;
export default {
  name:'app',
  data(){
    return{
      arrID:[],
      geoJson:{},
      sysFileId:"",
      fileNameList:[],
      shpFile: {},
      max:0,
      // perNum:[
      //   12,266,63,100,509,156,437,774,94,511,1,1300,11,1494,1903,847,1896,1740,1657,1349,764,1376,320,1885,1244,1000,1758,462,834,1593,1758,1830,2324,1863,726,485,722,755,2985,2466,44,2150,104,74,306,260,1728,117,691,727,660,917,4779,146,5,329,277,169,303,109,398,20,76,28,5,78,27,32,28,556,1131,182,137,24,326,66,21,64,21,523,1086,408,18,374,29,132,777,414,83,35,8,20,98,173,205,21,4836,121,135,68,51,28,4390,7742,1124,2011,2258,296,565,139,216,22,9,101,3440,6889,3255,5498,4559,630,2073,1333,1362,516,4899,2741,4743,6597,
      //   2460,1385,1462,1712,5807,1114,12675,2084,3404,7890,1336,5055,1812,3491,2101,10519,5731,6783,2439,13633,13813,4531,4537,5873,5518,4793,6588,18199,13979,4342,4478,2353,3066,1885,1663,1504,2721,2264,1438,2988,3008,2233,1647,960,2163,4094,1436,3481,3660,1530,7143,1241,925,566,730,1504,368,194,29,154,200,138,558,1097,1479,230,1088,2911,61,138,43,14,49,49,178,124,15,352,92,280,702,280,1428,970,188,486,45,53,241,31,83,36,28,72,91,668,92,1792,30,390,153,1291,2738,799,150,56,19,2114,864,383,194,356,371,628,2192,1204,145,9
      // ],

    }
  },
  components:{

  },
  mounted(){
    this.initmap()
    this.initFileName()
  },
  methods:{
    initFileName(){
      console.log(1111);
      this.request.get("/file/page",
          {
            params:{
              pageNum: 1,
              pageSize: 99
            }
          },
      ).then(res => {
        console.log(res.data);
        this.fileNameList = [];
        this.fileNameList = res.data.records;
        console.log(this.fileNameList, "this.fileNameList");
        this.total = res.data.total;
      })
    },

    initmap(){
      let that = this
      this.max =  Math.max.apply(null);

      let mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
      mapboxgl.accessToken = 'pk.eyJ1IjoibGl0YWl6ZW5nIiwiYSI6ImNrbHhycTZyNzEza2IydnBsbmo3dHh0Z3UifQ.q8qjMrqztI3hgqcyxolfMQ';
      map = new mapboxgl.Map({
        container: 'TaxiZone_MAP',
        style: 'mapbox://styles/litaizeng/ckh4sgqak0i9319mywoay9rkv',
        center: [116.38027588,39.95429443],
        zoom: 9.8
      });//
      // map.on('load',function () {
      //   that.selectShpFile()
      // })//
    },
    selectShpFile(){
      // this.shpFile = document.getElementById("uploadFileInput").files[0];
      // console.log(this.shpFile,'this.shpFile 点击获取的文件');

      this.request.post("/file/byid/" + this.sysFileId,
          {
            params:{
              pageNum: 1,
              pageSize: 99
            }
          },
          {
            responseType: "blob"
          }
      ).then(res => {
        console.log(res);
        console.log("res.data");
        // this.shpFile = res;
        this.shpFile = new Blob([res]);
        let fileReader = new FileReader();
        // 将文件读取为二级制码
        // fileReader.readAsArrayBuffer(this.shpFile);
        let that = this
        fileReader.onload = function() {
          // 获取读取的结果
          console.log(this.result,'js的文件读取结果');
          let shapefile = require("shapefile")
          shapefile.read(this.result).then(geoJson => {
            console.log(geoJson,'geoJson数据开始进行变换');
            for (let i = 0; i < geoJson.features.length; i++){
              that.getNewGeo(i, geoJson.features[i])
            }
          })
          // this.$forceUpdate();
        }
        fileReader.readAsArrayBuffer(this.shpFile);
        // this.$forceUpdate();
      })
      // console.log(this.shpFile, "this.shpFile 点击获取文件")
      console.log(typeof this.shpFile)
    },

    selectFileName(){
      // this.clearMap();
      this.selectShpFile();
    },

    getNewGeo(index,item){
      // console.log(index);
      let sou = item.geometry.coordinates;
      // console.log(sou);
      // let c = this.getColorByNumber(this.perNum[index], this.max)
      //console.log(c)
      this.arrID.push('bj'+index)
      map.addLayer({
        'id':String('bj'+index),
        'type':'fill',
        'source':{
          'type':'geojson',
          'data': {
            'type': 'Feature',
            'geometry': {
              'type': 'Polygon',
              'coordinates': sou
            }
          }

        },
        'layout':{},
        'paint':{
          // 'fill-color': c,
          'fill-color': 'blue',
          'fill-outline-color': 'white',
          'fill-opacity': 0.3,
        }
      })
    },
    // rgbaToHex(color) {//255,0,0 #ff00ff
    //   let values = color
    //       .replace(/rgba?\(/, '')
    //       .replace(/\)/, '')
    //       .replace(/[\s+]/g, '')
    //       .split(',');
    //   let a = parseFloat(values[3] || 1),
    //       r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
    //       g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
    //       b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
    //
    //   return "#" +
    //       ("0" + r.toString(16)).slice(-2) +
    //       ("0" + g.toString(16)).slice(-2) +
    //       ("0" + b.toString(16)).slice(-2);
    // },

    // getColorByNumber(n,max) {
    //   let halfMax = max / 12;
    //   let one = 255 / max;
    //
    //   let r = 0,g = 0,b = 0;
    //   if(n<(max*0.1))           {  g = (one*n*10)+60>200?200:(one * n)*10+60;b = 245 ;r=60};
    //   if((max*0.1)<=n && n<(max*0.2))   { g = 255; b=255-(one*n)*3.3<0?0:(255-(one*n)*3.3)};
    //   if(n>=(max*0.2)&&n<=(max*0.3))    { g = 255; r = one * n*3};
    //   if(n>(max*0.3))           { g = 255-(one*n);r=255};
    //
    //   // if(n<(max*0.1))           { g = (one*n*15)+60>200?200:(one * n)*10+10;b = 80};
    //   // if((max*0.1)<=n && n<(max*0.2))   { g = 255; b=255-(one*n)*3.3<0?0:(255-(one*n)*3.3)};
    //   // if(n>=(max*0.2)&&n<=(max*0.3))    { g = 255; r = one * n*3};
    //   // if(n>(max*0.3))           { g = 255-(one*n);r=255};
    //
    //
    //
    //   r = parseInt(r);// 取整
    //   g = parseInt(g);// 取整
    //   b = parseInt(b);// 取整
    //
    //   //console.log(r,g,b)
    //   return this.rgbaToHex("rgb(" + r + "," + g + "," + b + ")");
    // },

    clearMap(){
      if (this.arrID.length>0){
        for (let i = 0; i < this.arrID.length; i++) {
          map.removeLayer(this.arrID[i])
          map.removeSource(this.arrID[i])
        }
        document.getElementById("uploadFileInput").value = ''
        this.arrID.length = 0
      }
    }
  }
}

</script>
<style>
#TaxiZone{
  position: relative;
  width:100%;
  height:100%
}
.shpUp{
  position: absolute;
  top: 20px;
  left: 12px;
  width: 22%;
  height: 15%;
  z-index: 100;
  font-size: 20px;
  font-weight: 700;
  color: white;
  background-color: rgba(49, 51, 53, 0.7);
  background-image: url("../../assets/image/public_resource/border_new1.png");
  background-size: 100% 100%;
  /*opacity: 0.8;*/
  border-radius: 20px;
  overflow: auto;
}
.input-file-button{
  display: inline-block;
  position: absolute;
  top:20px;
  left: 20px;
  font-size: 18px;
  color: white;
}

.uploadFileInput{
  /*display: none;*/
  position: absolute;
  top:60px;
  left: 20px;
  /*margin-top: 30px;*/
  /*margin-left: 30px;*/
  /*background-color: #FFF;*/
  /*background: #FFF;*/
  /*border: 1px solid #DCDFE6;*/
  color: #fff;

}

.clearButton{
  position: absolute;
  top: 75px;
  left: 220px;
}
.selectShp{
  top: 20px;
  left: 15px;
}

.container{
  width:100%;
  height:100%
}

#tazone{
  position: absolute;
  bottom: 4%;
  right: 2%;
  width:83px;
  z-index: 99;
}

</style>